<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/address/list?change=Y" class="address-section">
			<view class="order-content">
                <uv-icon size="22" name="map"></uv-icon>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.realName}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address">{{addressData.provincename}} {{addressData.cityname}} {{addressData.countyname}} {{addressData.address}}</text>
				</view>
                <uv-icon size="17" name="arrow-right"></uv-icon>
			</view>
			<image class="a-bg" src=""></image>
		</navigator>

		<view class="goods-section">
			<view class="g-item">
				<image :src="confrimData.productLogo"></image>
				<view class="right">
					<text class="title clamp">{{ confrimData.productName }}</text>
                    <template v-if="confrimData.sku">
                        <view class="spec">{{ confrimData.sku.name }}</view>
                        <view class="price-box">
                            <text class="price">￥{{ confrimData.sku.sellPrice }}</text>
                            <text class="number">x {{ confrimData.quantity }}</text>
                        </view>
                    </template>
					
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="memberRemark" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>总价</text>
				<text class="price-tip">￥</text>
				<text class="price" v-if="confrimData.sku">{{ numFilter(confrimData.sku.sellPrice * confrimData.quantity) }}</text>
			</view>
			<text class="submit bg-line-color" @click="submit">确认购买</text>
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getAddressList } from '@/api/product'
import { skuCreateOrder } from '@/api/order'

import { onLoad , onShow} from "@dcloudio/uni-app"
const memberRemark = ref<any>('')
const addressData = ref<any>({})
const productId = ref<any>('')
const confrimData = ref<any>({})
onLoad((options : any) => {
    productId.value = options.productId
    
})
const pageInit = () => {
    getAddressList({page_no:1,per:100}).then(res => {
        if(res.success){
            res.data.records.forEach(item => {
                if(item.defaultAddress == 'Y')addressData.value = item
            })
        }
    })
    uni.getStorage({
        key: 'confrimData',
        success: (res) => {
            confrimData.value = res.data
        }
    })
}
onShow(() => {
    pageInit()
})
const numFilter = (value) => {
	// 截取当前数据到小数点后两位
	let realVal = parseFloat(value).toFixed(2)
	return realVal
}

const submit = () => {
    skuCreateOrder({
        addressId:addressData.value.id,
        memberRemark:memberRemark.value,
        productId:confrimData.value.productId,
        qty:confrimData.value.quantity,
        skuId:confrimData.value.sku.id
    }).then(res => {
        if(res.success){
            uni.navigateTo({
                url:`/pages/mall/orderConfirm?tradeno=${res.data}`
            })
        }else{
            uni.showToast({icon:'none',title:res.msg})
        }
    })
}

</script>

<style lang="scss">
page {
    background: $page-color-base;
    padding-bottom: 100upx;
}

.address-section {
    padding: 30upx 0;
    background: #fff;
    position: relative;

    .order-content {
        display: flex;
        align-items: center;
        padding:32upx;
    }

    .cen {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 28upx;
        color: $font-color-dark;
        padding-left:12upx;
    }

    .name {
        font-size: 34upx;
        margin-right: 24upx;
    }

    .address {
        margin-top: 6upx;
        margin-right: 20upx;
        color: $font-color-light;
    }

    .a-bg {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 5upx;
    }
}

.goods-section {
    margin-top: 16upx;
    background: #fff;
    padding-bottom: 1px;

    .g-header {
        display: flex;
        align-items: center;
        height: 84upx;
        padding: 0 30upx;
        position: relative;
    }

    .logo {
        display: block;
        width: 50upx;
        height: 50upx;
        border-radius: 100px;
    }

    .name {
        font-size: 30upx;
        color: $font-color-base;
        margin-left: 24upx;
    }

    .g-item {
        display: flex;
        margin: 22upx 32upx;
        padding: 32upx 0;
        image {
            flex-shrink: 0;
            display: block;
            width: 140upx;
            height: 140upx;
            border-radius: 4upx;
        }

        .right {
            flex: 1;
            padding-left: 24upx;
            overflow: hidden;
        }

        .title {
            font-size: 32upx;
            color: $font-color-dark;
            font-weight: 600;
        }

        .spec {
            font-size: 26upx;
            color: $font-color-light;
        }

        .price-box {
            display: flex;
            align-items: center;
            font-size: 32upx;
            color: $base-color;
            padding-top: 10upx;

            .price {
                margin-bottom: 4upx;
            }
            .number{
                font-size: 26upx;
                color: $font-color-base;
                margin-left: 20upx;
            }
        }

        .step-box {
            position: relative;
        }
    }
}
.yt-list {
    background: #fff;
    margin:22upx;
    border-radius: 9px;
    font-size: $font-base;
}

.yt-list-cell {
    display: flex;
    align-items: center;
    padding: 10upx 30upx 10upx 40upx;
    line-height: 70upx;
    position: relative;

    &.cell-hover {
        background: #fafafa;
    }

    &.b-b:after {
        left: 30upx;
    }

    .cell-icon {
        text-align: center;
        border-radius: 4upx;
        margin-right: 12upx;
    }

    .cell-more {
        align-self: center;
        font-size: 24upx;
        color: $font-color-light;
        margin-left: 8upx;
        margin-right: -10upx;
    }

    .cell-tit {
        flex: 1;
        color: $font-color-dark;
        margin-right: 10upx;
        font-weight: 600;
    }

    .cell-tip {
        font-size: 26upx;
        color: $font-color-dark;

        &.disabled {
            color: $font-color-light;
        }

        &.active {
            color: $base-color;
        }
        &.red{
            color: $base-color;
        }
    }

    &.desc-cell {
        .cell-tit {
            max-width: 90upx;
        }
    }

    .desc {
        flex: 1;
        font-size: $font-base;
        color: $font-color-dark;
    }
}
.coupon-cell{
    padding:32upx 32upx 32upx 40upx;
    position: relative;
    &::after{
        position: absolute;
        content: "";
        width: 90%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.05);
        right: 5%;
        bottom: 0;
    }
    &:last-child::after{height:0;}
    .available-coupon {
        border-radius: 32px;
        background: linear-gradient(to right, #ff9565, #fb2c4c);
        color: #fff;
        padding: 6upx 22upx;
        font-size: $font-base;
        height: 32upx;
        line-height: 32upx;
    }
}
/* 支付列表 */
.pay-list{
    padding-left: 40upx;
    margin-top: 16upx;
    background: #fff;
    .pay-item{
        display: flex;
        align-items: center;
        padding-right: 20upx;
        line-height: 1;
        height: 110upx;	
        position: relative;
    }
    .icon-weixinzhifu{
        width: 80upx;
        font-size: 40upx;
        color: #6BCC03;
    }
    .icon-alipay{
        width: 80upx;
        font-size: 40upx;
        color: #06B4FD;
    }
    .icon-xuanzhong2{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60upx;
        height: 60upx;
        font-size: 40upx;
        color: $base-color;
    }
    .tit{
        font-size: 32upx;
        color: $font-color-dark;
        flex: 1;
    }
}

.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90upx;
    justify-content: space-between;
    font-size: 30upx;
    background-color: #fff;
    z-index: 998;
    color: $font-color-base;
    box-shadow: 0 -1px 5px rgba(0,0,0,.1);
    .price-content{
        padding-left: 30upx;
    }
    .price-tip{
        color: $base-color;
        margin-left: 8upx;
    }
    .price{
        font-size: 36upx;
        color: $base-color;
    }
    .submit{
        display:flex;
        align-items:center;
        justify-content: center;
        width: 280upx;
        height: 100%;
        color: #fff;
        font-size: 32upx;
        background-color: $base-color;
    }
}

/* 优惠券面板 */
.mask{
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 9995;
    transition: .3s;
    
    .mask-content{
        width: 100%;
        min-height: 30vh;
        max-height: 70vh;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: .3s;
        overflow-y:scroll;
    }
    &.none{
        display: none;
    }
    &.show{
        background: rgba(0,0,0,.4);
        
        .mask-content{
            transform: translateY(0);
        }
    }
}

</style>
